<template>
	<view class="home">
		<u-navbar title="首页" :is-back="false"
			:background="{backgroundImage: 'linear-gradient(45deg, #68dae7, #21a4b3)'}" title-color="#FFFFFF">
		</u-navbar>
		<view class="home-bind" v-if="role == 'customer'">
			<!-- <view class="home-bind-text">{{deviceText}}</view> -->
			<view class="home-bind-btn" @tap.stop="addSn">绑定设备</view>
		</view>
		<view v-if="role == 'customer'">
			<view :class="item.isselect?'home-bind active':'home-bind' " v-for="(item,index) in deviceArr" :key="index" @tap="selectDevice(item.id,item.isselect)">
				<view class="home-bind-text">{{item.deviceName}}</view>
				<view class="home-bind-btn" @tap.stop="removeDevice(item.id,item.isselect)">解除绑定</view>
			</view>
		</view>
		<view class="home-wrap-icon">
			<u-grid :col="4" :border="false" hover-class="none">
				<u-grid-item :custom-style="{position: 'relative'}" v-for="(item, index) in iconList" :key="index" v-if="item.role.indexOf(role) != -1 || item.role == 'all'"   @click="clickEvent(item.url)">
					<view >
						<image class="icon-image" :src="item.image" lazy-load></image>
						<view class="icon-text">{{item.text}}</view>
						<view  v-if="index == 2 && repairCount>0 && role =='admin'">
							<u-badge type="error" :count="repairCount" :offset="[30, 30]"></u-badge>
						</view>
						<view  v-if="index == 3 && repairCount>0 && role =='engineer'">
							<u-badge type="error" :count="repairCount" :offset="[30, 30]"></u-badge>
						</view>
						<view  v-if="index == 4 && noticeCount>0">
							<u-badge type="error" :count="noticeCount" :offset="[30, 30]"></u-badge>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				iconList:[
					{
						text:"设备列表",
						image:"/static/images/devicelist.png",
						url:"pages/device/deviceList",
						role:"admin engineer"
					},
					{
						text:"设备信息",
						image:"/static/images/deviceInfo.png",
						url:"pages/home/deviceInfo",
						role:"customer"
					},
					{
						text:"维修申请",
						image:"/static/images/applylist.png",
						url:"pages/device/applylist",
						badge:true,
						role:"admin customer"
					},
					{
						text:"维修列表",
						image:"/static/images/maintenlist.png",
						url:"pages/device/maintenlist",
						badge:true,
						role:"admin engineer"
					},
					{
						text:"待办通知",
						image:"/static/images/inspectionList.png",
						url:"pages/device/inspectionList",
						badge:true,
						role:"admin engineer"
					},
					{
						text:"添加设备",
						image:"/static/images/addDevice.png",
						url:"pages/device/addDevice",
						role:"admin engineer"
					},
					{
						text:"维修记录",
						image:"/static/images/maintenance.png",
						url:"pages/home/maintenance",
						role:"customer"
					},
					{
						text:"巡检记录",
						image:"/static/images/Inspection.png",
						url:"pages/home/Inspection",
						role:"all"
					},{
						text:"核查记录",
						image:"/static/images/check.png",
						url:"pages/home/check",
						role:"all"
					},{
						text:"保养记录",
						image:"/static/images/keep.png",
						url:"pages/home/mainList",
						role:"all"
					},
					{
						text:"故障报修",
						image:"/static/images/devicecheck.png",
						url:"pages/home/devicecheck",
						role:"customer"
					},
				],
				deviceArr:uni.getStorageSync("deviceArr")?JSON.parse(uni.getStorageSync("deviceArr")):[],
				deviceSn:null,
				// matinceNumber:5,
				// inspectionNumber:2,
				applyListNumber:1,
				role:null,
				noticeCount:0,
				repairCount:0
			}
		},
		onLoad(){
			// this.getNumber()
			let role = uni.getStorageSync("role")
			let sn = uni.getStorageSync("sn")
			if(this.deviceArr.length>0){
				this.deviceArr.forEach(item=>{
					if(item.isselect) this.deviceSn = item.id
				})
			}
			if(!role){
				this.$u.route({
					url: '/pages/welcome/login',
					type: 'reLaunch'
				})
			}else{
				this.role = role
			}
		},
		onShow() {
			this.getNumber()
		},
		methods: {
			getNumber(){
				this.$xt.api.deviceNotice().then(res=>{
					this.noticeCount = res.data.noticeCount
					this.repairCount = res.data.repairCount
				})
			},
			addSn(){
				const _this = this
				uni.scanCode({
					success(res) {
						let params = {
							sn:res.result
						}
						let isreset = false
						_this.$xt.api.detailInfoBySn(params).then(result=>{
							_this.deviceArr.forEach(item=>{
								if(item.isselect) item.isselect = false
								if(item.id == result.data.id){
									item.isselect = true
									isreset = true
								}
							})
							_this.deviceSn = result.data.id
							let obj = {
								id:result.data.id,
								deviceName:result.data.deviceName,
								isselect:true,
								sn:res.result
							} 
							if(!isreset) _this.deviceArr.push(obj)
							uni.setStorageSync("deviceArr",JSON.stringify(_this.deviceArr))
						})
					},
					fail(res) {
						
					}
				})
			},
			selectDevice(id,isselect){
				if(isselect) return
				this.deviceArr.forEach(item=>{
					item.isselect = false
					if(item.id == id) item.isselect = true
				})
				uni.setStorageSync("deviceArr",JSON.stringify(this.deviceArr))
			},
			removeDevice(id,isselect){
				this.deviceArr = this.deviceArr.filter(item=>{
					return item.id != id
				})
				if(isselect){
					if(this.deviceArr.length == 0){
						this.deviceSn = null
					}else{
						this.deviceArr[0].isselect = true
						this.deviceSn = this.deviceArr[0].id
					}
				}
				uni.setStorageSync("deviceArr",JSON.stringify(this.deviceArr))
			},
			clickEvent(url){
				if(this.role == "admin"){
					this.$u.route({
						url:url,
						type:"navigateTo",
					})
				}else if(this.deviceSn){
					this.$u.route({
						url:url,
						type:"navigateTo",
						params:{
							deviceSn:this.deviceSn
						}
					})
				}else{
					this.$refs.uToast.show({
						title:"请绑定设备",
						duration:2000,
						type:"error"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.home{
		&-bind{
			background-color: #fff;
			display: flex;
			padding: 20rpx 24rpx;
			justify-content: space-between;
			align-items: center;
			&-text{
				color:#a8a8a8
			}
			&-btn{
				padding: 10rpx 24rpx;
				background-color: #00aa00;
				color:#fff;
				border-radius: 15rpx;
			}
		}
	}
	.home-wrap-swiper {
		margin-top: 10rpx;
		
	}
	
	.home-wrap-icon {
		padding: 0 24rpx;
		margin: 10rpx 0;
		background-color:#fff;
		border-radius: 5rpx;
	}
	
	.icon-image {
		width: 90rpx;
		height: 90rpx;
	}
	
	.icon-text {
		font-size: 24rpx;
		margin-top: 8rpx;
	}
	.home .active{
		background-color: #92c1ff;
		
	}
	.home .active .home-bind-text{
		color:#fff 
	}
</style>